<template>
  <basic-container>
    <div class="custom-data-header">
      <el-icon @click="router.go(-1)"><ArrowLeftBold /></el-icon>
      <h1>干细胞输匿名003-其他定制数据</h1>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabList"
        :label="item.label"
        :name="item.name"
        :key="item.name"
      ></el-tab-pane>
    </el-tabs>

    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :before-open="beforeOpen"
      v-model:page="page"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
    >
      <template #menu-left>
        <div v-if="activeName === 'otherCustomData'">
          <el-button type="primary">其他定制二维码</el-button>
          <el-button type="primary">其他定制文件</el-button>
          <el-button type="primary">查看打印</el-button>
        </div>
        <div v-if="activeName === 'personalCRF'">
          <el-button type="primary">诊断</el-button>
          <el-button type="primary">医嘱</el-button>
          <el-button type="primary">添加临床数据</el-button>
          <el-button type="primary">添加流程</el-button>
          <el-button type="primary">检测报告</el-button>
          <el-button type="primary">导出Excel</el-button>
          <el-button type="primary">查看并打印</el-button>
          <el-button type="primary">个性CRF文件</el-button>
        </div>
        <div v-if="activeName === 'reportData'" style="display: flex; gap: 10px">
          <el-select style="width: 200px" v-model="form.fileType" placeholder="请选择文件类型">
            <el-option label="图片" value="image"></el-option>
            <el-option label="视频" value="video"></el-option>
            <el-option label="文档" value="document"></el-option>
          </el-select>
          <!-- <el-button type="warning">选择上传</el-button>
           
            -->
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="/api/blade-resource/oss/endpoint/put-file"
            ref="uploadRef"
            :headers="headers"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-remove="uploadRemove"
            :show-file-list="false"
            :on-change="handleChange"
          >
            <el-button type="warning">选择上传</el-button>
          </el-upload>
        </div>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import website from "@/config/website";
import { Base64 } from "js-base64";
import { getToken } from '@/utils/auth';
const router = useRouter();
const tabList = ref([
  { label: '其他定制表', name: 'otherCustomData' },
  { label: '个性CRF', name: 'personalCRF' },
  { label: '报告资料', name: 'reportData' },
]);
const activeName = ref('otherCustomData');
const optionCustom = ref({
  height: 'auto',
  calcHeight: 30,
  tip: false,
  border: true,
  viewBtn: true,
  addBtn: false,
  align: 'center',
  column: [
    {
      label: 'CRF名称',
      prop: 'serviceId',
    },
    {
      label: '最新提交时间',
      prop: 'createTime',
    },
  ],
});
const optionPersonal = ref({
  height: 'auto',
  calcHeight: 30,
  tip: false,
  border: true,
  viewBtn: true,
  addBtn: false,
  align: 'center',
  column: [
    {
      label: '临床数据名称',
      prop: 'serviceId',
    },
    {
      label: '创建时间',
      prop: 'createTime',
    },
    {
      label: '备注',
      prop: 'remark',
    },
  ],
});
const optionReport = ref({
  height: 'auto',
  calcHeight: 30,
  tip: false,
  border: true,
  viewBtn: true,
  addBtn: false,
  align: 'center',
  searchMenuSpan: 4,
  searchMenuPosition: 'right',
  column: [
    {
      label: '文件类型',
      prop: 'fileType',

      type: 'select',
      dicData: [
        { label: '图片', value: 'image' },
        { label: '视频', value: 'video' },
        { label: '文档', value: 'document' },
      ],
    },
    {
      label: '文件名称',
      prop: 'fileName',
    },
    {
      label: '文件大小',
      prop: 'fileSize',
    },
    {
      label: '上传时间',
      prop: 'uploadTime',
    },
  ],
});
const option = ref(optionCustom.value);
const headers = ref({
  Authorization: `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
  'Blade-Requested-With': 'BladeHttpRequest',
});
const page = ref({
  total: 2,
  currentPage: 1,
  pageSize: 10,
});
const form = ref({});
const loading = ref(false);
const data = ref([
  {
    serviceId: 'CRF1',
    createTime: '2023-10-01 12:00:00',
  },
  {
    serviceId: 'CRF2',
    createTime: '2023-10-02 12:00:00',
  },
]);
const handleClick = () => {
  initOption();
};
const initOption = () => {
  const optionMap = {
    personalCRF: optionPersonal.value,
    reportData: optionReport.value,
    otherCustomData: optionCustom.value,
  };

  option.value = optionMap[activeName.value];
};
const beforeUpload = (file) => {
    headers.value[website.tokenHeader] = "bearer " + getToken();
};
</script>
<style scoped lang="scss">
.custom-data-header {
  display: flex;
  align-items: center;
  .el-icon {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
